<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-if="!isActive" ><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <!-- <div :class="{active: isActive}"> -->
        <div :style="activeStyle">
          <slot name="item-text"></slot>
        </div>
        
    </div>
</template>

<script>
export default {
  name:'TabBarItem',
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data(){
   return {
    //  isActive:true,
   }
  },
   computed: {
     isActive() {
       return this.$route.path.indexOf(this.path) !== -1;
     },
     activeStyle() {
       return this.isActive ? {color: this.activeColor} :{}
     }
   },
  methods:{
    itemClick(){
      // console.log('Item clicked');
      // console.log(this.path);
      this.$router.replace(this.path).catch(err => err)
    }
  }
}
</script>

<style scoped>

.tab-bar-item{
  flex: 1;/*平均分布*/
  text-align: center;
  height: 49px;
}
.tab-bar-item img{
    width: 30px;
    height:30px;
    vertical-align: middle;
}
/* .active{
  color:red;
} */
</style>
